<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜单页面</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/v2.6.10/vue.min.js"></script>
		<script src="js/v2.6.10/elementui.js"></script>
		<script src="js/v3.2.8/axios.js"></script>
		<script src="js/common.js"></script>
		<style>
			#now{
				margin-left: 1px;
				color: white;
			}
			
			body {
				margin: 0;
			}

			.el-header {
				background-color: thistle;
			}

			.el-aside {
				border-right: 1px solid silver;
				position: absolute;
				top: 60px;
				bottom: 0px;
			}

			.el-main {
				position: absolute;
				/* 再改left */
				left: 200px;
				right: 0px;
				top: 60px;
				bottom: 0px;
				padding: 0px;
				padding: 0;
			}

			#exit {
				margin-top: 20px;
				margin-left: 1120px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header>
					<el-link id="exit" :underline="false" target="_blank" @click="exitLogin()">退出登录</el-link>
					<span id="now">当前登录的用户名:{{uName}}</span>
				</el-header>
				<el-container>
					<el-aside width="200px">
						<el-tree :data="treedata" :props="defaultProps" @node-click="handleNodeClick">
							<span class="custom-tree-node" slot-scope="{ node, data }">
								<span>
									<i :class="data.imgIcon"></i>
									{{ node.label }}
								</span>
							</span>
						</el-tree>
					</el-aside>
					<el-main>
						<!-- 内嵌标签 -->
						<iframe :src="framesrc" frameborder="0" width="100%" height="99%"></iframe>
					</el-main>
				</el-container>
			</el-container>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				framesrc: "",
				treedata: [{
					label: '一级 1',
					children: [{
						label: '按钮',
						href: "button.html"
					}]
				}],
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				uName: "", // 接收用户名
			},
			methods: {
				// 退出登录
				exitLogin() {
					console.log("删之前:" + this.token);
					// 删除token
					window.localStorage.removeItem("jwtToken", this.token);
					window.location.href = "login.html";
				},
				handleNodeClick(data) {
					console.log(data);
					this.framesrc = data.href; // 把路径赋值给src
				},
				initTreeData() {
					// 获取 token
					console.log(this.token);
					let that = this;
					axios.get(API + "selectUserMenu")
						.then(function(res) {
							console.log("selectUserMenu:")
							console.log(res.data.data.user.uname);
							that.uName = res.data.data.user.uname;// 给用户名赋值
							let s = arrayToTree(res.data.data.menuList); // 处理json数据
							// 赋值给 treedata
							that.treedata = s;
						}).catch(err => {
							console.log(err);
						});
				}
			},
			mounted() { // vue生命周期函数,挂载完毕之后执行
				this.initTreeData(); // 初始化获取树的数据
			}
		})
	</script>
</html>